<template>
  <div class="friends" ref="friends">
    <search @changeSearchState="changeSearchState" />
    <ul class="friends_box" :style="{'max-height':listMaxHeight+'px'}" v-show="!searchState">
      <li :class="['friends_line',{active:chooseIndex==-1}]" @click="applyClick">
        <img class="friends_avatar" src="../../assets/new_friends.png" />
        <span class="friends_name">添加好友</span>
        <!-- <span class="friends_apply_num">1</span> -->
      </li>
      <div class="friend_total">
        <div class="friends_border"></div>
        <div class="friends_total_num">{{$store.state.friendList.length}}位联系人</div>
        <div class="friends_border"></div>
      </div>

      <!-- <div class="pingyin_list" v-for="(item,index) in list" :key="index">
        <div class="pingyin_first">{{item.title}}</div>
        <li :class="['friends_line',{active:data.choose}]" v-for="(data,dataIndex) in item.children" :key="dataIndex" @contextmenu.prevent="getItem(data,$event)" @click="friendClick">
          <img class="friends_avatar" :src="data.img" />
          <span class="friends_name">{{data.name}}</span>
        </li>
      </div> -->
      
      <li :class="['friends_line',{active:chooseIndex==index}]" v-for="(item,index) in $store.state.friendList" :key="index" @contextmenu.prevent="getItem(item,$event)" @click="friendClick(item,index)">
        <img class="friends_avatar" :src="item.friendHeadImg" />
        <span class="friends_name">{{$store.state.user.id==item.userId?item.userName:item.friendRemarks}}</span>
      </li>
    </ul>

    <searchList v-show="searchState"/>
    <shareCard :shareCardState="shareCardState" v-show="shareCardState" @changeShareCardState="changeShareCardState" />

    <ul class="contextmenu" v-if="contextmenuState" ref="contextmenuEle">
      <li class="context_select" @click="transMessage">发消息</li>
      <!-- <li class="context_select" @click="sendCard">发送名片</li> -->
      <li class="context_select" @click="openDeleteFriendDialog" v-if="this.mouseItem.userId!=$store.state.user.id">删除好友</li>
    </ul>

    <el-dialog
      :visible.sync="deleteFriendDialog"
      width="290px"
      :show-close="false"
      :close-on-click-modal="false">

      <div class="dialog_tips">
        <div>确认删除当前好友?</div>
        <div class="little_tips">同时删除与该好友的所有聊天记录?</div>
      </div>
      <div class="btns_box">
        <div class="primarybtn default" @click="cancelDeleteFriendDialog">取消</div>
        <div class="primarybtn" @click="deleteFriend">确定</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {Dialog,Message} from 'element-ui'
import search from '../search'
import shareCard from '../share_card'
import searchList from '../search_list'
import bus from '../../bus'
import {delFriend,chatList} from '../../api/api'
export default {
  name:'friends',
  data(){
      return {
        contextmenuState:false,
        searchState:false,
        deleteFriendDialog:false,
        shareCardState:false,
        listMaxHeight:0,
        mouseItem:'',
        chooseIndex:-1,
        // list:
        // [
        //   {
        //     title:'A',
        //     children:[
        //       {
        //         img:'https://thirdwx.qlogo.cn/mmopen/vi_32/OQD4fMO3kYuJxibwZzlXy7cKs0Ech85xj7nAeHgFIA2sXJRkHFfaXhkia0WbyCmtzpmhPuJMbAwWPRu2VqVvnnBQ/132',
        //         name:'测试'
        //       },
        //       {
        //         img:'https://thirdwx.qlogo.cn/mmopen/vi_32/OQD4fMO3kYuJxibwZzlXy7cKs0Ech85xj7nAeHgFIA2sXJRkHFfaXhkia0WbyCmtzpmhPuJMbAwWPRu2VqVvnnBQ/132',
        //         name:'猫'
        //       }
        //     ]
        //   },
        //   {
        //     title:'C',
        //     children:[
        //       {
        //         img:'https://thirdwx.qlogo.cn/mmopen/vi_32/OQD4fMO3kYuJxibwZzlXy7cKs0Ech85xj7nAeHgFIA2sXJRkHFfaXhkia0WbyCmtzpmhPuJMbAwWPRu2VqVvnnBQ/132',
        //         name:'测试'
        //       },
        //       {
        //         img:'https://thirdwx.qlogo.cn/mmopen/vi_32/OQD4fMO3kYuJxibwZzlXy7cKs0Ech85xj7nAeHgFIA2sXJRkHFfaXhkia0WbyCmtzpmhPuJMbAwWPRu2VqVvnnBQ/132',
        //         name:'猫'
        //       }
        //     ]
        //   }
        // ]
      }
  },
  components: {
      search,
      searchList,
      shareCard,
      'el-dialog':Dialog,
  },
  mounted(){
    this.$nextTick(()=>{
      this.listMaxHeight = this.$refs.friends.offsetHeight-56-1
    })

    bus.$on('close',msg => {
      this.contextmenuState = msg
    })
  },
  methods:{
    //点击发送名片
    sendCard(){
      this.shareCardState = true
    },
    //触发发送名片弹窗
    changeShareCardState(value){
      this.shareCardState = value
    },
    //点击发送消息按钮
    transMessage(){
      let params = {
          sendUserId:this.$store.state.user.id,
          toId:this.mouseItem.friendId,
          globalId:0,
          pageSize:100
      }
      chatList(params)
      .then(res => {
        if(res.data&&res.data.data.list&&res.data.data.list.length!=0){
          var newChat = res.data.data.list[0]
          if(newChat.sendUserId!=this.$store.state.user.id){
            var toId = newChat.toId
            var toUserImg = newChat.toUserImg
            var toUserName = newChat.toUserName

            newChat.toId = this.mouseItem.friendId
            newChat.toUserImg = this.mouseItem.friendHeadImg
            newChat.toUserName = this.mouseItem.friendRemarks

            newChat.sendUserId = toId
            newChat.sendUserImg = toUserImg
            newChat.sendUserName = toUserName
          }else{
            newChat.toId = this.mouseItem.friendId
            newChat.toUserImg = this.mouseItem.friendHeadImg
            newChat.toUserName = this.mouseItem.friendRemarks
          }
        }else{
          var newChat = {
            content: "",
            contentImg: "",
            contentVideo: "",
            globalId: "",
            id: 0,
            index: 0,
            messageId: 1,
            messageType: 1,
            mine: 0,
            readStatus: 0,
            sendTime: "",
            sendUserId: this.$store.state.user.id,
            sendUserImg: this.$store.state.user.headImg,
            sendUserName: this.$store.state.user.userName,
            serviceTime: "",
            toId: this.mouseItem.friendId,
            toUserImg: this.mouseItem.friendHeadImg,
            toUserName: this.mouseItem.friendRemarks
          }
        }
        newChat.type = 1
        this.$store.commit('setChatList',newChat)
        this.$store.commit('chooseTalk',0)
        this.$store.commit('setNav','talk')
      })
    },
    openDeleteFriendDialog(){
      this.deleteFriendDialog = true
    },
    cancelDeleteFriendDialog(){
      this.deleteFriendDialog = false
    },
    getItem(item,event){
      var event = event || window.event;
      this.contextmenuState = true
      console.log(item)
      this.mouseItem = item

      let posX = 0, posY = 0;
      if (event.pageX || event.pageY) {
          posX = event.pageX;
          posY = event.pageY;
      } else if (event.clientX || event.clientY) {
          posX = event.clientX
          posY = event.clientY
      }

      let top = posY - this.$refs.friends.offsetTop
      let left = posX - this.$refs.friends.offsetLeft

      this.$nextTick(()=>{
        this.$refs.contextmenuEle.style.top = top + 'px'
        this.$refs.contextmenuEle.style.left = left + 'px'
      })
    },
    //更换搜索状态
    changeSearchState(value){
      this.searchState = value
    },
    //点击了添加好友
    applyClick(){
      this.chooseIndex = -1
      this.$emit('changeFriendDetail',false)
    },
    //点击了好友
    friendClick(item,index){
      this.chooseIndex = index
      this.$emit('changeFriendDetail',true)
      bus.$emit('getFriendDetail', item);
    },
    //删除好友
    deleteFriend(){
      let params = {
          userId:this.$store.state.user.id,
          friendId:this.mouseItem.friendId
      }
      delFriend(params)
      .then(res => {
          this.$store.commit('deleteFriend',this.mouseItem.friendId)
          this.cancelDeleteFriendDialog()
          Message({
            message: '删除成功',
            type: 'success'
          })
      })
    }
  }
}
</script>

<style scoped>
.friends{
  position: relative;
}
.friends_box{
  overflow: auto;
}
.friends_line{
  display: flex;
  align-items: center;
  height: 54px;
  padding: 10px;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
}
.friends_line.active{
  background: #edeff3;
}
.friends_line.active:hover{
  background: #edeff3;
}
.friends_line:hover{
  background: #fbfbfb;
}
.friends_avatar{
  width:34px;
  height:34px;
}
.friends_name{
  font-size:14px;
  color:#333;
  margin-left:10px;
}
.friends_apply_num{
  background: #fb7b7a;
  color: #fff;
  text-align: center;
  padding: 0 4px;
  height: 16px;
  line-height: 16px;
  font-size: 12px;
  border-radius: 8px;
  margin-left:auto;
}
.pingyin_first{
  color: #c1c1c1;
  padding-left: 10px;
  font-size: 12px;
  line-height: 20px;
  background: #fcfcfc;
}
.friend_total{
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bebebe;
  font-size: 12px;
  height:37px;
}
.friends_border{
  width: 48px;
  height: 1px;
  background: #dedede;
}
.friends_total_num{
  margin:0 5px;
}
.contextmenu{
  width:110px;
  position: absolute;
  overflow: hidden;
  background: white;
  z-index: 20;
  top:30px;
  right:-50px;
}
.context_select{
  width:110px;
  height:40px;
  padding:0 20px;
  cursor: pointer;
  font-size:14px;
  color:#333;
  line-height: 40px;
  text-align: center;
  box-sizing: border-box;
}
.context_select:hover{
  background: #edeff3;
}

.dialog_tips{
  line-height: 20px;
  padding: 46px 0 37px;
  text-align: center;
}
.little_tips{
  font-size: 12px;
}
.btns_box{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 30px;
}
.btns_box .primarybtn.default{
  margin-left: 0px;
}
.btns_box .primarybtn{
  margin-left:46px;
}
</style>